<template>
  <view>
    <view>
      <u-swiper
        :list="list1"
        indicator
        indicatorMode
        circular
      ></u-swiper>
    </view>
    <view class="button">
      <view class="nav-item">
        <view
          class="iconfont icon-ziyuan"
          @click="choashi()"
        > </view>
        <text>超市</text>
      </view>
      <view class="nav-item">
        <view
          class="iconfont icon-guanyuwomen"
          @click="guanyuwomen()"
        >
        </view>
        <text>关于我们</text>
      </view>
      <view class="nav-item">
        <view
          class="iconfont icon-tupian"
          @click="tupian()"
        >
        </view>
        <text>图片</text>
      </view>
      <view class="nav-item">
        <view
          class="iconfont icon-shipin"
          @click="sp()"
        >
        </view>
        <text>视频</text>
      </view>
    </view>

    <view
      class="tuijian"
      space="nbsp"
    >推 荐 商 品</view>

    <view class="goods-list">
      <view
        class="goods-item"
        v-for="item in getGoodsLists"
        :key="item.id"
        @click="goDetil(item.id)"
      >
        <image :src="item.img_url"></image>
        <view class="price">
          <text>￥{{item.market_price}}</text>
        </view>
        <view class="name">
          {{item.title}}
        </view>
      </view>
    </view>
    <view class="text1">
      <text>------ 我是有底线的 ------</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
      ],
      getGoodsLists: [],
    };
  },
  onLoad() {
    this.getGoodsList();
  },
  onPullDownRefresh() {
    console.log("触发");
    // this.list = ["asdasdasdasd", "asdasdasdasdsadasdasdasd"];
    setTimeout(function () {
      console.log(123);
      uni.stopPullDownRefresh();
    }, 2000);
  },
  methods: {
    choashi() {
      uni.navigateTo({
        url: "/pages/choashi/choashi",
        success() {
          console.log(111);
        },
      });
    },
    guanyuwomen() {
      uni.navigateTo({
        url: "/pages/guanyuwomen/guanyuwomen",
        success() {
          console.log(111);
        },
      });
    },
    tupian() {
      uni.navigateTo({
        url: "/pages/tupian/tupian",
        success() {
          console.log(111);
        },
      });
    },
    sp() {
      uni.navigateTo({
        url: "/pages/sp/sp",
        success() {
          console.log(111);
        },
      });
    },

    //获取商品列表
    getGoodsList() {
      uni.request({
        url: "http://localhost:8082/api/getgoods?pageindex=1",
        success: (res) => {
          console.log(res.data.message);
          this.getGoodsLists = res.data.message;
          console.log(this.getGoodsLists);
        },
      });
    },
    //

    goDetil(id) {
      uni.navigateTo({
        url: "/pages/index/xiangqingye?id=" + id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.button {
  display: flex;
  .nav-item {
    view {
      width: 120rpx;
      height: 120rpx;
      background: #dc143c;
      border-radius: 60rpx;
      margin: 10px auto;
      line-height: 120rpx;
      color: #fff;
      font-size: 50rpx;
    }
    text-align: center;
    width: 25%;
    text {
      font-size: 30rpx;
    }
  }
}
.tuijian {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60rpx;
  color: white;
  background: #dc143c;
  margin-top: 15px;
}
.text {
  background: #dc143c;
  color: red;
}
.goods-list {
  padding: 0 21rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  .goods-item {
    background: #fff;
    width: 355rpx;
    margin: 10rpx 0;
    image {
      width: 95%;
      height: 350rpx;
    }
    .price {
      margin: 20rpx 0 5rpx 0;
      color: red;
    }
    .name {
      margin: 5rpx;
    }
  }
}
.text1 {
  text-align: center;
}
</style>
